<!-- 物业费缴费明细统计报表 -->
<template>
    <div class="eCBAnalysis page">
        <div class="leftContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <img src="@/assets/images/data/wyfjf.png" class="phLogo" />

            <div class="btnList">
                <div :class="getPh(1)" @click="changePh(1)">已缴费</div>
                <div :class="getPh(2)" @click="changePh(2)">未缴费</div>
            </div>

            <div class="searchContent">
                <timeCard @changeDate="(value) => (value1 = value)" />
                <div class="searchItem">
                    <el-select v-model="hy" placeholder="请选择" style="width: 100%">
                        <el-option label="荷园01" value="1"></el-option>
                        <el-option label="荷园02" value="2"></el-option>
                    </el-select>
                </div>
                <div class="searchItem">
                    <label class="label">区域建筑/部门：</label>
                    <treeSelect
                        :treeProps="props"
                        :options="treeSelectList"
                        v-model="parentId"
                        :clearable="isClearable"
                        :accordion="isAccordion"
                        :expandNode="false"
                        size="small"
                        width="100%"
                        @getValue="getValue($event)"
                    />
                </div>
                <div class="searchItem">
                    <label class="label">建筑类别：</label>
                    <el-select v-model="jzlb" placeholder="请选择" multiple collapse-tags>
                        <el-option label="公共教学" value="shanghai"></el-option>
                        <el-option label="公共教学2" value="beijing"></el-option>
                    </el-select>
                </div>

                <!-- <div class="searchItem">
                    <label class="label">统计单位：</label>
                    <div>
                        <el-button size="small" :type="ylOrJe == 'yl' ? 'primary' : 'default'" @click="ylChange('yl')">用量</el-button>
                        <el-button size="small" :type="ylOrJe == 'je' ? 'primary' : 'default'" @click="ylChange('je')">金额</el-button>
                    </div>
                </div> -->

                <!-- 统计、重置 -->
                <statisticsResetBtn :handleSubmitForm="handleSubmitForm" :handleReset="handleReset" />
            </div>
        </div>
        <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
            <div class="right-content-top">
                <div class="rightTitle">
                    <span>物业费缴费明细统计报表</span>
                    <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                    <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
                </div>

                <!-- <div class="tableTitle">总用量</div> -->
                <div class="tableContent">
                    <el-table :data="tableData" size="small">
                        <el-table-column prop="roomName" label="建筑/房间名称" fixed width="100"> </el-table-column>
                        <el-table-column prop="ldNum" label="楼栋数量(栋)" width="100"> </el-table-column>
                        <el-table-column prop="bzAccount" label="用户总数(个)" width="100"> </el-table-column>
                        <el-table-column prop="bzTime" label="统计时间" align="center" width="100"></el-table-column>
                        <el-table-column prop="bzbs" label="已缴费数量（个）" width="130"> </el-table-column>
                        <el-table-column prop="bzbs" label="未缴费数量（个）" width="130"> </el-table-column>
                        <el-table-column label="已缴费金额（元）" align="center"> </el-table-column>
                        <el-table-column label="未缴费金额（元）" align="center"> </el-table-column>
                        <el-table-column label="违约金（元）" align="center"> </el-table-column>
                        <el-table-column prop="remark" label="备注"> </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="right-content-bottom">
                <div class="title">
                    <label>统计时间：</label>
                    <span>2025年1月1日 - 2025年2月1日</span>
                </div>

                <div class="gjw-list">
                    <div v-if="tableData2.length == 0" class="noData">暂无数据</div>
                    <div v-else>
                        <div class="gjw-list-list" :key="Math.random() * 100000">
                            <el-table :data="tableData2" size="small" height="calc(100vh - 500px)">
                                <el-table-column prop="accountName" label="建筑/房间名称" fixed width="180"> </el-table-column>
                                <el-table-column prop="userName" label="业主姓名"> </el-table-column>
                                <el-table-column label="手机号" prop="tel" align="center"> </el-table-column>
                                <el-table-column label="面积" prop="area" align="center"> </el-table-column>
                                <el-table-column label="缴费周期" prop="jfzq" align="center"> </el-table-column>
                                <el-table-column label="缴费状态" prop="jfzt1" align="center"> </el-table-column>
                                <el-table-column label="所属身份" prop="sssf" align="center"> </el-table-column>
                                <el-table-column prop="wyfje" label="物业费金额（元）"> </el-table-column>
                                <el-table-column prop="wyj" label="违约金（元）"> </el-table-column>
                                <el-table-column prop="jfzt2" label="缴费状态"> </el-table-column>
                                <el-table-column prop="jfrq" label="缴费日期"> </el-table-column>
                                <el-table-column prop="bz" label="备注"> </el-table-column>
                            </el-table>
                        </div>
                        <div class="title">
                            <label>建筑/房间名称：</label>
                            <span>学生公寓</span>
                            <label>总用户数（个）：</label>
                            <span>30</span>
                            <label>欠费户数（个）：</label>
                            <span>3</span>
                            <label>欠费总金额（元）：</label>
                            <span>1000</span>
                        </div>
                        <div class="gjw-list-page">
                            <el-pagination
                                background
                                :layout="'prev, pager, next,total,sizes'"
                                :total="count"
                                :page-size="size"
                                :current-page="current"
                                @current-change="pageChange"
                                :page-sizes="[20, 50, 100, 200, 500]"
                                @size-change="handleSizeChange"
                            >
                                >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
    </div>
</template>

<script>
import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
import {LeftTree} from '@/mockData/monitorCenter.js'
import arrowLeft from '@/components/customComponents/arrowLeft'
import statisticsResetBtn from '@/components/statisticsResetBtn'
import timeCard from '@/components/timeCard/index'
// import {Utility} from "@/libs/utility"
export default {
    name: 'eCBAnalysis',
    components: {timeCard, treeSelect, arrowLeft, statisticsResetBtn},
    data() {
        return {
            count: 2,
            size: 20,
            current: 1,
            tableData: [
                {
                    roomName: '学生公寓',
                    ldNum: '23',
                    bzAccount: '50',
                    bzTime: '2025年1月1日',
                    bzbs: '260',
                    bzs: 11,
                    bzd: 22,
                    bzq: 33,
                    bzr: 44,
                    hxs: 111,
                    hxd: 222,
                    hxq: 333,
                    hxr: 444,
                    bzhxs: 1111,
                    bzhxd: 2222,
                    bzhxq: 3333,
                    bzhxr: 4444,
                    hxzje: 666,
                    bzzhzje: 666,
                    remark: ''
                }
            ],
            tableData2: [
                {
                    accountName: '学生公寓1栋-1层-101',
                    userName: '张三',
                    tel: '',
                    area: '90',
                    jfzq: '',
                    jfzt1: '正常',
                    sssf: '学生',
                    wyfje: '1200',
                    wyj: '0',
                    jfzt2: '已缴清',
                    jfrq: '2025-06-10',
                    bz: '无',
                    id: 1
                },
                {
                    accountName: '学生公寓1栋-1层-102',
                    userName: '王五',
                    tel: '',
                    area: '90',
                    jfzq: '',
                    jfzt1: '正常',
                    sssf: '学生',
                    wyfje: '1200',
                    wyj: '0',
                    jfzt2: '已缴清',
                    jfrq: '2025-06-10',
                    bz: '含违约金',
                    id: 2
                },
                {
                    accountName: '学生公寓1栋-1层-103',
                    userName: '李四',
                    tel: '',
                    area: '90',
                    jfzq: '',
                    jfzt1: '欠费',
                    sssf: '学生',
                    wyfje: '1200',
                    wyj: '0',
                    jfzt2: '未缴',
                    jfrq: '2025-06-10',
                    bz: '催缴中',
                    id: 3
                }
            ],
            dir: 'left',
            yearValue: [],
            ylOrJe: 'yl',
            hy: '1',
            jzlb: '',
            mode: 'year',
            // monthrange daterange
            format: 'years',
            value1: '',
            curHeight: document.body.clientHeight - 590,
            phIndexs: [2],
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: LeftTree,
            parentId: '',
            isClearable: true, // 可清空（可选）
            isAccordion: false // 可收起（可选）
        }
    },
    computed: {},
    created() {},
    mounted() {
        // Utility.setPosition()
    },
    methods: {
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            // this.initPage()
        },
        // 分页点击事件
        pageChange(p) {
            this.current = p
            // this.initPage()
        },
        // 获取prop属性
        getProp(name, type) {
            var value = ''
            if (type == 1) {
                value = 'd'
            }
            if (type == 2) {
                value = 's'
            }
            if (type == 3) {
                value = 'q'
            }
            if (type == 4) {
                value = 'r'
            }
            return name + value
        },
        getLabel(name, type) {
            var value = ''
            if (type == 1) {
                value = '电'
            }
            if (type == 2) {
                value = '水'
            }
            if (type == 3) {
                value = '气'
            }
            if (type == 4) {
                value = '热'
            }
            return name + value
        },
        arrowChange(e) {
            this.dir = e
        },
        ylChange(yl) {
            this.ylOrJe = yl
        },
        getPh(index) {
            var index1 = this.phIndexs.findIndex((b) => b == index)
            return index1 > -1 ? 'btnItem hover' : 'btnItem'
        },
        submitForm() {},
        modeChange(mode) {
            this.mode = mode
            if (mode == 'year') {
                this.format = 'years'
            }
            if (mode == 'month') {
                this.format = 'monthrange'
            }
            if (mode == 'day') {
                this.format = 'daterange'
            }
        },
        changePh(index) {
            var phIndexs = this.phIndexs
            var index1 = phIndexs.findIndex((b) => b == index)
            if (index1 > -1) {
                phIndexs.splice(index1, 1)
            } else {
                phIndexs.push(index)
            }
            this.phIndexs = phIndexs
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/statisticsReportCenter.scss';
</style>
